

import React, { Component } from 'react';
import {Row,Col,Form,Input,Cascader,InputNumber,Button, message,Modal,Steps} from "antd";
import {UserOutlined,LockOutlined,PhoneOutlined,ExclamationCircleOutlined,MoneyCollectOutlined ,HddOutlined ,PayCircleOutlined } from "@ant-design/icons"
import { history, peijian, Rumoney } from '../../utils';
import { ajax } from '../../api';
import myuser from '../../mobx/myuser';
import {observer} from "mobx-react"
import RichEditor from './richEditor';

const steps = [
    {title:"出库单",desc:"请填写后提交"},
    {title:"维修车辆",desc:"请填写维修车辆信息"},
    {title:"提交出库",desc:"请待审核"}
]
const {Step} = Steps;
const layout = {
    labelCol: { offset:6,span: 12 },
    wrapperCol: { offset:6 , span: 12 },
};
@observer
class Chukudan extends Component {

    state={
        flag:{},
        number:1,
        a:["发动机配件", "发动机总成"],
        from:{},
        current:0,
        neirong:""
    }

    componentDidMount(){
        this.chukufrom.setFieldsValue({
            username:localStorage.getItem("username"),
            phone:localStorage.getItem("phone")
        });

        ajax.getkucun({
            peijian:["发动机配件", "发动机总成"]
        }).then(res=>{
            if(res.code==200){
                if(res.result){
                    this.setState({
                        flag:res.result
                    },()=>{
                        (this.state.a).forEach((item,i)=>{
                            Rumoney.forEach((value,index)=>{
                                this.chukufrom.setFieldsValue({
                                    kucun:res.result.content,
                                    money:(value.money*1.2).toFixed(2),
                                    dbmoney:(this.shuliang.state.value*(value.money*1.2)).toFixed(2)
                                })
                            })
                        })
                        
                    })
                }else{
                   
                    this.setState({
                        flag:{}
                    },()=>{
                        this.chukufrom.setFieldsValue({
                            kucun:"暂无库存"
                        })
                    })
                }
            }
        })
    }

        

    onChange=(value)=>{
        console.log(value)
        value.forEach((item,i)=>{
            Rumoney.forEach((value,index)=>{
                if(item==value.value){
                    this.chukufrom.setFieldsValue({
                        money:(value.money*1.2).toFixed(2),
                        dbmoney:(this.shuliang.state.value*(value.money*1.2)).toFixed(2)
                    })
                }
            })
        })
        ajax.getkucun({
            peijian:value
        }).then(res=>{
            if(res.code==200){
                if(res.result){
                    this.setState({
                        flag:res.result
                    },()=>{
                        this.chukufrom.setFieldsValue({
                            kucun:res.result.content
                        })
                    })
                }else{
                    this.setState({
                        flag:{}
                    },()=>{
                        this.chukufrom.setFieldsValue({
                            kucun:"暂无库存"
                        })
                    })
                }
            }
        })
    }
    
    numberchange=(value)=>{
        this.setState({
            number:value
        },()=>{
            this.chukufrom.setFieldsValue({
                dbmoney:(value*this.dmoney.state.value).toFixed(2)
            })
        })
    }

    currentadd=()=>{
        if(this.state.current==0){
            this.chukufrom.validateFields().then(value=>{
                this.setState({
                    current:++this.state.current
                })
                this.setState({
                    from:value
                })
            }).catch(err=>{
                message.error("请填写完整数据再提交")
            })
        }else{
            if(this.state.current==1&&this.state.neirong){
                this.setState({
                    current:++this.state.current
                })
            }else{
                message.error("请填写富文本编辑框")
            }
        }
    }

    showMoal=()=>{
        Modal.confirm({
                title: '库存提示',
                icon: <ExclamationCircleOutlined />,
                content: '库存不足,是否立即添加库存',
                okText: '确认',
                cancelText: '取消',
                onOk:()=>{
                    if(myuser.user&&myuser.user.role>0){
                        history.push("/main/advise/list")
                    }else{
                        message.error("暂无权限,请联系管理添加库存")
                    }
                }
          });
    }

    currentmieus=()=>{
        this.setState({
            current:--this.state.current
        })
    }

    getContent=(content)=>{
        this.setState({
            neirong:content
        })
    }

    submit=()=>{
        var obj=this.state.from
        obj.neirong=this.state.neirong
        console.log(obj)
        ajax.addchuku(obj).then(res=>{
            if(res.code==200){
                history.push("/main/advise/time")
            }
        })
    }

    render() {
        const {flag,number,current} = this.state
        return (
            <div >
                <div style={{margin:"15px"}}>
                    <Steps current={current}>
                        {
                            steps.map((item,i)=>(
                                <Step key={i} title={item.title} description={item.desc}>

                                </Step>
                            ))
                        }
                    </Steps>
                </div>

                <Row>
                    <Col span={18} offset={3}>
                        <div style={{border:"1px solid #000", padding:5,display:current==0?"block":"none"}}>
                            <h2 style={{textAlign:"center",fontSize:24,fontWeight:600,borderBottom:"2px dotted #000",paddingBottom:5,letterSpacing:5}}>出库单</h2>
                            <p style={{textAlign:"center", fontSize:16,borderBottom:"1px solid #000",paddingBottom:10}}>请先选中配件类型:自动获取库存数量,再出库</p>
                             <Form
                                name="addForm"
                                ref={el=>this.chukufrom=el}
                                layout="vertical"
                                className="form-box"
                                {...layout}
                                initialValues={{ 
                                    content:1,
                                    peijian:["发动机配件", "发动机总成"]
                                }}
                            >
                                <Form.Item
                                    label="出库人"
                                    name="username"
                                    rules={[{ required: true, message: '请输入出库人姓名' }]}
                                >
                                    <Input disabled prefix={<UserOutlined  className="login-icon-color" /> }  />
                                </Form.Item>
                                <Form.Item
                                    label="手机号码"
                                    name="phone"
                                    rules={[
                                        { required: true, message: '请输入手机号码!' },
                                    ]}
                                >
                                    <Input type="tel" disabled placeholder="手机号码" prefix={<PhoneOutlined  className="login-icon-color"   />} />
                                </Form.Item>
                                <Form.Item
                                    label="配件栏"
                                    name="peijian"
                                    rules={[{ required: true, message: '请选择配件' },
                                ]}
                                >
                                    <Cascader  placeholder="请选择出库的配件"  options={peijian} onChange={this.onChange} ></Cascader> 
                                </Form.Item>
                                <Form.Item
                                    label="总库存"
                                    name="kucun"
                                    rules={[{ required: true, message: '请选择配件' }]}
                                >
                                    <Input type="text" disabled style={{width:"100%"}}  prefix={<HddOutlined   className="login-icon-color"  />} />
                                </Form.Item>
                                <Form.Item
                                    label="单价"
                                    name="money"
                                    rules={[{ required: true, message: '请选择配件' }]}
                                >
                                    <Input type="text" disabled style={{width:"100%"}} ref={el=>this.dmoney=el} prefix={<MoneyCollectOutlined  className="login-icon-color"  />} />
                                </Form.Item>
                                <Form.Item
                                    label="出库数量"
                                    name="content"
                                    rules={[
                                        { required: true, message: '请输入数量' },
                                        {
                                            pattern:/^[1-9]*[1-9][0-9]*$/,message:"请输入正确的数量"
                                        }
                                    
                                    ]}
                                >
                                    <InputNumber style={{width:"100%"}} onChange={this.numberchange} ref={el=>this.shuliang=el} prefix={<LockOutlined  className="login-icon-color"  />} />
                                </Form.Item>
                                <Form.Item
                                    label="总价"
                                    name="dbmoney"
                                >
                                    <Input type="text" disabled style={{width:"100%"}}  prefix={<PayCircleOutlined   className="login-icon-color"  />} />
                                </Form.Item>
                            </Form>
                        </div>
                        <div style={{marginTop:30,height:240, border:"1px solid #000",display:current==1?'block':'none'}}>
                                <RichEditor getContent={this.getContent}></RichEditor>
                        </div>
                    </Col>
                </Row>
                <Row>
                    <Col span={13} offset={11}>
                        <div style={{marginTop:20}}>
                            {
                               current<steps.length-1&&((flag&&flag.content>=number)?<Button type="primary" onClick={this.currentadd}>
                                下一步
                            </Button>:<Button type="danger" onClick={this.showMoal}>
                                库存不足
                            </Button>)
                            }
                            {
                                current>0&&<Button type="danger" style={{margin:'0 5px'}} onClick={this.currentmieus}>上一步</Button>
                            }
                            {
                                current==steps.length-1&&<Button type="primary" style={{margin:'0 5px'}} onClick={this.submit}>提交出库单</Button>
                            }
                        </div>
                    </Col>
                </Row>
            </div>
        );
    }
}

export default Chukudan;